html {
    will-change: transform;
}

.mathsquizgrid {
  display: grid;
  grid-template-columns: 60px 50px 60px 60px 60px 10px; /* Fixed 6 columns */
  grid-template-rows: auto; /* PHP determines rows */
  gap: 10px;
  margin:auto;
  border: 3px solid black;
  border-radius:15px;
  @apply max-w-[400px];
}

.penguin {
  animation: wobble 20s linear infinite alternate; 
}
@keyframes wobble {
  0% { transform: rotate(8deg) translate(0,0);}
  50% { transform: rotate(-8deg) translate(-10px,300px); }
  100% { transform: rotate(8deg) translate(0,0);}
}

.penguin .eye {
  animation: lookAround 5s infinite alternate;
}
@keyframes lookAround {
  0% { transform: translateX(0); }
  25% { transform: translateX(5px); } /* Look right */
  50% { transform: translateX(-5px); } /* Look left */
  75% { transform: translateX(0); } /* Back to center */
}

.penguin .blink {
  visibility: hidden;
}

.penguin .leftflipper {
  animation: anim_left-flipper 5s infinite alternate;
}
@keyframes anim_left-flipper {
  0% { transform: translateX(0); }
  25% { transform: translateX(4px); } 
  50% { transform: translateX(-4px); } 
  75% { transform: translateX(0); } 
}

.penguin .rightflipper {
  animation: anim_right-flipper 5s infinite alternate;
}
@keyframes anim_right-flipper {
  0% { transform: translateX(0); }
  30% { transform: translateX(6px); } 
  55% { transform: translateX(-6px); } 
  75% { transform: translateX(0); } 
}